<template>
	<view class="container">
		<titlebar mode="" :back="true" text="通知" img="@appstatic/my/my_icon_settingtouched.png" @rightIconClick="set"></titlebar>
		<scroll-view :style="'top:'+navigationBarHeight+'px ;'+'height:'+contentHeight+'px;width: 100%;position:fixed;'" scroll-y="true" lower-threshold @scrolltoupper="handleToUpper">
			<!-- <view class="message-kinds" :style="'padding-top:'+navigationBarHeight+'px ;'"> -->
			<view class="message-kinds">
				<!-- 系统通知 -->
				<view class="row" @click="gotoSystemMessage">
					<view class="left">
						<image v-if="systemChecked" class="avatar" src="@appstatic/message/message_icon_systemmessage.png" mode=""></image>
						<image v-else src="./static/avatar_systemmessage_ban.png" class="avatar" mode=""></image>
						<!--未读显示 点-->
						<view v-if="systemRead==0 && !systemChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;"></view>
						<image v-else-if="systemRead!==0 && systemChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						<image v-else style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;visibility: hidden;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						
						<view class="text">
							<view><text class="all-message">系统通知</text></view>
							<!-- <view class="new-message"><text class="ellipsis">{{firstmessage4}}</text></view> -->
							<view class="new-message">
								<text v-if="systemChecked" class="ellipsis">{{firstmessage4}}</text>
								<text v-else class="ellipsis">已关闭提醒</text>
							</view>
						</view>
					</view>
					<view class="right">
						<image style="width: 16px;height: 18px;" src="@appstatic/message/message_icon_arrow.png" mode=""></image>
					</view>
				</view>
				<!-- 互动通知 -->
				<view class="row" @click="gotoInteractMessage">
					<view class="left">
						<image v-if="interactChecked" class="avatar" src="@appstatic/message/message_icon_interactmessage.png" mode=""></image>
						<image v-else  src="./static/avatar_interactmessage_ban.png" class="avatar" mode="" ></image>
						<!--未读显示 点-->
						<view v-if="interactRead==0 && !interactChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;"></view>
						<image v-else-if="interactRead!==0 && interactChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						<image v-else style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;visibility: hidden;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						
						<view class="text">
							<view><text class="all-message">互动通知</text></view>
							<!-- <view class="new-message"><text>{{firstmessage2}}</text></view> -->
							<view class="new-message">
								<text v-if="interactChecked" class="ellipsis">{{firstmessage2}}</text>
								<text v-else class="ellipsis">已关闭提醒</text>
							</view>
						</view>
					</view>
					<view class="right">
						<image style="width: 16px;height: 18px;" src="@appstatic/message/message_icon_arrow.png" mode=""></image>
					</view>
				</view>
				<!-- 订单通知 -->
				<view class="row" @click="gotoOrderMessage">
					<view class="left">
						<image v-if="orderChecked" class="avatar" src="@appstatic/message/message_icon_ordermessage.png" mode=""></image>
						<image v-else src="./static/avatar_ordermessage_ban.png" class="avatar" mode=""></image>
						<!--未读显示 点-->
						<view v-if="orderRead==0 && !orderChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;"></view>
						<image v-else-if="orderRead!==0 && orderChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						<image v-else style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;visibility: hidden;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						
						<view class="text">
							<view><text class="all-message">订单通知</text></view>
							<!-- <view class="new-message"><text class="ellipsis">{{firstmessage1}}</text></view> -->
							<view class="new-message">
								<text v-if="orderChecked" class="ellipsis">{{firstmessage1}}</text>
								<text v-else class="ellipsis">已关闭提醒</text>
							</view>
						</view>
					</view>
					<view class="right">
						<image style="width: 16px;height: 18px;" src="@appstatic/message/message_icon_arrow.png" mode=""></image>
					</view>
				</view>
				<!-- 告警 -->
				<view class="row" @click="gotoWarnMessage">
					<view class="left">
						<image v-if="warnChecked" class="avatar" src="./static/avatar_warnmessage.png" mode=""></image>
						<image v-else src="./static/avatar_warnmessage_ban.png" class="avatar" mode=""></image>
						<!--未读显示 点-->
						<view v-if="warnRead==0 && !warnChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;"></view>
						<image v-else-if="warnRead!==0 && warnChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						<image v-else style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;visibility: hidden;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						
						
						
						<view class="text">
							<view><text class="all-message">车辆告警</text></view>
							<view class="new-message">
								<text v-if="warnChecked" class="ellipsis">{{firstmessage5}}</text>
								<text v-else class="ellipsis">已关闭提醒</text>
							</view>
						</view>
					</view>
					<view class="right">
					<image style="width: 16px;height: 18px;" src="@appstatic/message/message_icon_arrow.png" mode=""></image>
					</view>
				</view>
				<!-- 商城通知 -->
				<view class="row" @click="gotoMallMessage">
					<view class="left">
						<image v-if="mallChecked" class="avatar" src="./static/avatar_mallmessage.png" mode=""></image>
						<image v-else src="./static/avatar_mallmessage_ban.png" class="avatar" mode=""></image>
						<view v-if="mallRead==0 && !mallChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;"></view>
						<image v-else-if="mallRead!==0 && mallChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						<image v-else style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;visibility: hidden;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						
						<view class="text">
							<view><text class="all-message">商城通知</text></view>
							<view class="new-message">
								<text v-if="mallChecked" class="ellipsis">{{firstmessage6}}</text>
								<text v-else class="ellipsis">已关闭提醒</text>
							</view>
						</view>
					</view>
					<view class="right">
					<image style="width: 16px;height: 18px;" src="@appstatic/message/message_icon_arrow.png" mode=""></image>
					</view>
				</view>
				<!-- 活动通知 -->
				<view class="row" @click="gotoActivityMessage">
					<view class="left">
						<image v-if="activityChecked" class="avatar" src="./static/avatar_activitymessage.png" mode=""></image>
						<image v-else src="./static/avatar_activitymessage_ban.png" class="avatar" mode=""></image>
						<view v-if="activityRead==0 && !activityChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;"></view>
						<image v-else-if="activityRead!==0 && activityChecked" style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						<image v-else style="width: 10px;height: 10px;position: relative;bottom: 16px;right: 10px;visibility: hidden;" src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						
						<view class="text">
							<view><text class="all-message">活动通知</text></view>
							<view class="new-message">
								<text v-if="activityChecked" class="ellipsis">{{firstmessage8}}</text>
								<text v-else class="ellipsis">已关闭提醒</text>
							</view>
						</view>
					</view>
					<view class="right">
					<image style="width: 16px;height: 18px;" src="@appstatic/message/message_icon_arrow.png" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import titlebar from '@/components/titlebar/titlebar'
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require('../../manager/network-manager.js');
	const dialog=require("../../utils/dialog.js");
	export default {
		components: {
			titlebar
		},
		data() {
			return {
				firstmessage1:'',
				firstmessage2:'',
				firstmessage4:'',
				firstmessage5:'',//告警
				firstmessage6:'',//商城
				firstmessage8:'',//活动
				
				text:"通知",
				img:"../../static/message/message_icon_titlebar.png",
				value: 0,
				
				orderRead:0,
				systemRead:0,
				interactRead:0,
				warnRead:0,//新增告警
				mallRead:0,//商城
				activityRead:0,//活动
				
				navigationBarHeight:app.globalData.navigationBarHeight,
				contentHeight:app.globalData.windowHeight-app.globalData.navigationBarHeight-(app.globalData.tabBarHeight),
				setting:[],
				
				systemChecked:true,
				orderChecked:true,
				interactChecked:true,
				warnChecked:true,//新增告警
				mallChecked:true,//商城
				activityChecked:true,//活动
				
				
				deviceId:'',
			}
		},
		onLoad: function(options) {
		   // this.loadData(true);
		   if (util.isLogin(getApp())) {
			   this.$fire.$on('message', function(){
					this.refresh();
			   });
		   }
		   
		},
		onShow: function(options) {
			console.log("onShow");
			if (util.isLogin(getApp())) {
				this.refresh();
			}else{
				
			}
		},
		
		methods: {
			refresh:function(){
				//debugger
				console.log("message refresh")
				this.showOrderFirstMessage();
				this.showInteractFirstMessage();
				this.showSystemFirstMessage();
				this.showWarnFirstMessage();
				this.showMallFirstMessage();
				this.showActivityFirstMessage();
				
				this.orderIsRead();
				this.systemIsRead();
				this.interactIsRead();
				this.warnIsRead();
				this.mallIsRead();
				this.activityIsRead();
				
				this.getSetting()
			},
			handleToUpper(){//下拉刷新
			debugger
				this.refresh()
			},
			//系统通知
			gotoSystemMessage:function(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./systemMessage'
					})
				}else{
					util.jumpLogin();
				}
			},
			//互动通知
			gotoInteractMessage:function(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./interactMessage'
					})
				}else{
					util.jumpLogin();
				}
			},
			//订单通知
			gotoOrderMessage:function(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./orderMessage'
					})
				}else{
					util.jumpLogin();
				}
			},
			//车辆告警
			gotoWarnMessage:function(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./warnMessage?deviceId='+this.deviceId
					})
				}else{
					util.jumpLogin();
				}
			},
			//商城通知
			gotoMallMessage:function(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./mallMessage'
					})
				}else{
					util.jumpLogin();
				}
			},
			//活动通知
			gotoActivityMessage:function(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./activityMessage'
					})
				}else{
					util.jumpLogin();
				}
			},
			
			//相关类别的第一条消息
			//订单
			async showOrderFirstMessage(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE_ONE;
				var params={
					"isType": 1
				};
				network.get(uri,params,'form').then(res=>{
					// debugger
					console.log(res);
					if(res.code==200){
						// that.firstmessage1=res.data.context
						var context=res.data.context.replace(/<\/?.+?\/?>/g, '')
						that.firstmessage1=context
					}else{
						// uni.showToast({
						// 	title:res.message,
						// 	duration: 3000,
						// 	icon: 'none'
						// })
					}
				}).catch()
			},
			//互动
			async showInteractFirstMessage(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE_ONE;
				var params={
					"isType": 2
				};
				network.get(uri,params,'form').then(res=>{
					// debugger
					console.log(res);
					if(res.code==200){
						that.firstmessage2=res.data.context
					}else{
						// uni.showToast({
						// 	title:res.message,
						// 	duration: 3000,
						// 	icon: 'none'
						// })
					}
				}).catch()
			},
			//系统
			async showSystemFirstMessage(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE_ONE;
				var params={
					"isType": 4
				};
				network.get(uri,params,'form').then(res=>{
					// debugger
				
					if(res.code==200){
						if(res.data.context && res.data.context!==''){
							// var context=res.data.context.replace(/<\/?.+?\/?>/g, '')
							// that.firstmessage4=context
							that.firstmessage4=res.data.theme
						}else{
							that.firstmessage4=res.data.hyperchain
						}
						
					}else{
						// uni.showToast({
						// 	title:res.message,
						// 	duration: 3000,
						// 	icon: 'none'
						// })
					}
				}).catch()
			},
			//告警
			async showWarnFirstMessage(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE_ONE;
				var params={
					"isType": 5
				};
				network.get(uri,params,'form').then(res=>{
					// debugger
					console.log(res);
					if(res.code==200){
						that.firstmessage5=res.data.context
						that.deviceId=res.data.relationId
					}else{
						// uni.showToast({
						// 	title:res.message,
						// 	duration: 3000,
						// 	icon: 'none'
						// })
					}
				}).catch()
			},
			//商城
			async showMallFirstMessage(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE_ONE;
				var params={
					"isType": 6
				};
				network.get(uri,params,'form').then(res=>{
					// debugger
					console.log(res);
					if(res.code==200){
						that.firstmessage6=res.data.context
					}
				}).catch()
			},
			//活动
			async showActivityFirstMessage(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE_ONE;
				var params={
					"isType": 8
				};
				network.get(uri,params,'form').then(res=>{
					// debugger
					console.log(res);
					if(res.code==200){
						that.firstmessage8=res.data.context
					}
				}).catch()
			},
			
			//是否已读
			async orderIsRead(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGLISTCOUNT
				var params={
					"type":1
				};
				network.get(uri,params,'form').then(res=>{
					//debugger
					if(res.code==200){
						 that.orderRead=res.data
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
				
			},
			async systemIsRead(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGLISTCOUNT
				var params={
					"type":4
				};
				network.get(uri,params,'form').then(res=>{
					//debugger
					if(res.code==200){
						 that.systemRead=res.data
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			async interactIsRead(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGLISTCOUNT
				var params={
					"type":2
				};
				network.get(uri,params,'form').then(res=>{
					//debugger
					if(res.code==200){
						 that.interactRead=res.data
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			async warnIsRead(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGLISTCOUNT
				var params={
					"type":5
				};
				network.get(uri,params,'form').then(res=>{
					//debugger
					if(res.code==200){
						 that.warnRead=res.data
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			async mallIsRead(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGLISTCOUNT
				var params={
					"type":6
				};
				network.get(uri,params,'form').then(res=>{
					//debugger
					if(res.code==200){
						 that.mallRead=res.data
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			async activityIsRead(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGLISTCOUNT
				var params={
					"type":8
				};
				network.get(uri,params,'form').then(res=>{
					//debugger
					if(res.code==200){
						 that.activityRead=res.data
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			
			//点击右上角设置
			set(){
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url:'./messageSetting'
					})
				}else{
					util.jumpLogin();
				}
			},
			async getSetting(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_GET_USSERSETTINGMESSAGELIST;
				var params={};
				network.get(uri,params,'form').then(res=>{
					that.orderChecked=true
					that.interactChecked=true
					that.systemChecked=true
					that.warnChecked=true
					that.mallChecked=true
					that.activityChecked=true
					if(res.code==200){
						 that.setting=res.data;
						 for(var i=0;i<that.setting.length;i++){
							 if(that.setting[i].messageType==1){
								 that.orderChecked=false
							 }
							 if(that.setting[i].messageType==2){
								 that.interactChecked=false
							 }
							 if(that.setting[i].messageType==4){
							 	that.systemChecked=false
							 }
							 if(that.setting[i].messageType==5){
								 that.warnChecked=false
							 }
							 if(that.setting[i].messageType==6){
							 	that.mallChecked=false
							 }
							 if(that.setting[i].messageType==8){
							 	that.activityChecked=false
							 }
						 }
					}else{
						// uni.showToast({
						// 	title:res.message,
						// 	duration: 3000,
						// 	icon: 'none'
						// })
					}
				}).catch()
			},
		}
	}
</script>
<style>
	page {
		background: url('@appstatic/img/my/bg-img.jpg') no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
	}
</style>
<style lang="less">
.container {
	
}
.message-kinds {
	display: flex;
	flex-direction: column;
	padding-left: 16px;
	padding-right: 27px;
}
.row {
	height: 83px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	vertical-align: middle;
	align-items: center;
}
.left {
	
	display: flex;
	vertical-align: middle;
	align-items: center;
	flex-direction: row;
}
.uni-bage-left-margin {
	margin-left: 10px;
}
.avatar {
	width: 42px;
	height: 42px;
}
.text {
	/* padding-left: 12px; */
	width: 150px;
}
.all-message {
	line-height: 22.4px;
	font-size: 16px;
	color: #3D3A3A;
}
.new-message {
	line-height: 16.8px;
	font-size: 12px;
	color: #ADB0AE;
	width:100%;
	min-width: 0;
	
	
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.ellipsis {
	
}

</style>
